import {ElMessage} from "element-plus";
import ArkPagination from "../ark-pagination/ArkPagination.vue";
import {ArkPaginationOptions} from "../ark-pagination/ArkPaginationOptions";

export default {
  title: 'ark-component-v2/ArkPagination',
  component: ArkPagination,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue3、v3-easyui、typescript、lodash、ArkPagination</span> 使用`
      }
    }
  },
  argTypes: {
    options: {description: 'ArkPaginationOptions'},
  }
};

export const Basic = {
  name: '基本使用',
  render: (args: ArkPaginationOptions) => ({
    components: {ArkPagination},
    setup() {
      return {args};
    },
    template: `
      <ArkPagination v-model:options="args.options"/>`,
  }),
  args: {
    options: {
      total: 16,
      pageSize: 2,
      pageNumber: 2,
      onPageSizeChange(pageSize: number) {
        ElMessage({
          message: '每页数量改变事件，参数请看控制台打印',
          type: 'success',
        });
        console.log('每页数量改变事件参数', pageSize);
      },
      afterPageSizeChange(pageSize: number) {
        ElMessage({
          message: '每页数量改变之后，参数请看控制台打印',
          type: 'success',
        });
        console.log('每页数量改变之后参数', pageSize);
      },
      onPageNumberChange(pageNumber: number) {
        ElMessage({
          message: '页码改变事件，参数请看控制台打印',
          type: 'success',
        });
        console.log('页码改变事件参数', pageNumber);
      },
      afterPageNumberChange(pageNumber: number) {
        ElMessage({
          message: '页码改变之后，参数请看控制台打印',
          type: 'success',
        });
        console.log('页码改变之后参数', pageNumber);
      },
    }
  },
};